<template>
<div>
  <el-card>
    <div>
      <el-row>
        <el-form ref="adminForm" :model="adminForm" label-width="85px" label-position="left">
          <el-col :span="8">
            <el-form-item label="管理员：">
              <el-input v-model="adminForm.realName" :clearable=true placeholder="请输入管理员姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="1">
            <el-form-item label="性别：">
              <el-select v-model="adminForm.sex" placeholder="请选择性别" :clearable=true>
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item>
              <template>
                <el-button type="success" size="small" @click="onSearch">搜索</el-button>
                <el-button size="small" @click="onReset('adminForm')">重置</el-button>
              </template>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <!-- <div class="content-header">
      <el-button type="success" size="small" @click="handleAdd">新增管理员</el-button>
    </div> -->
    <div>
      <div>
        <el-table :data="adminData" stripe style="width: 100%" :header-cell-style="{
      'background-color': '#fafafa',
      'color': 'rgb(103, 194, 58)',
      'border-bottom': '1px rgb(103, 194, 58) solid'}">
          <el-table-column prop="id" label="管理员编号"></el-table-column>
          <el-table-column prop="realName" label="用户姓名"></el-table-column>
          <el-table-column prop="username" label="账号"></el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">
              <span>{{scope.row.sex==0? '男':'女'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="idCard" label="身份证号"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="tel" label="手机号"></el-table-column>
          <el-table-column prop="position" label="职务"></el-table-column>
          <el-table-column prop="birth" label="出生年月"></el-table-column>
          <el-table-column prop="email" label="邮箱"></el-table-column>
          <el-table-column prop="aptName" label="公寓名称"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="editClick(scope.row)" class="editButton">编辑</el-button>
              <el-button type="text" @click="deleteClick(scope.row.id)" class="deleteButton">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
<!--    分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[8, 10, 15, 50]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination-warp">
    </el-pagination>
  </el-card>

<!--  新增对话框子组件-->
  <addAdmin ref="add"></addAdmin>
<!--  编辑对话框子组件-->
  <edit-admin ref="edit" @editCallBack="editBack"></edit-admin>
</div>
</template>

<script >
import addAdmin from "@/components/admin/addAdmin";
import editAdmin from "@/components/admin/editAdmin";
export default {
name: "admin",
  data(){
    return{
      adminData:[],
      adminForm:{
        realName:'',
        sex:''
      },
      pagenum:1,//当前页数
      pagesize:10,//当前页有多少条数据
      total:100//总页数
    }
  },
  components:{
    addAdmin,
    editAdmin
  },
  created() {
    this.getUserList()
  },
  methods:{
    //获取管理员数据
    async getUserList(){
      const {data:res} = await this.$http.get('/user/getManagers',{params: {
          pageNum: this.pagenum,
          pageSize: this.pagesize
        }})
      if (res.code !== 200){
        return this.$message.error("获取管理员信息失败")
      }
      this.adminData = res.data.list
      this.total = res.data.total
    },
    //监听pagesize的改变事件
    handleSizeChange(newSize){
      this.pagesize=newSize
      this.getUserList()
    },
    //监听页码的变化
    handleCurrentChange(newPage){
      this.pagenum=newPage
      this.getUserList()
    },
    //搜索功能
    async onSearch(){
      const {data:res} = await this.$http.post('/user/getUserByEntity',{
        real_name:this.adminForm.realName,
        sex:this.adminForm.sex,
        rule_id: 2,//管理员模块只能搜索管理员
        pageNum:this.pagenum,
        pageSize:this.pagesize
      })

      if (res.code !== 200){
        return this.$message.error("查询失败")
      }
      this.adminData = res.data.list
      this.total = res.data.total
    },
    //搜索重置
    onReset(){
      this.$refs.adminForm.resetFields()
      this.getUserList()
    },
    //编辑
    editClick(row){
      this.$refs.edit.init(row)
    },
    //编辑对话框的回调函数
    editBack(){
      this.getUserList()
    },
    //删除
    deleteClick(id){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post('/user/deleteUserById/'+id).then(()=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getUserList()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        })
      // const {data:res}= this.$http.post('/user/deleteUserById/'+id)
      // if(res.code!==200) return this.$message.error('删除管理员信息失败！')
      // this.$message.success('删除管理员信息成功~')
      // this.getUserList()
    },
    //新增
    // handleAdd(){
    //   this.$refs.add.init()
    // }
  },
}
</script>

<style scoped>
</style>